<template>
  <page-header-one :scrollTop="scrollTop" :menuCheck="0"></page-header-one>

  <div class="banner flex-center flex-column flex-align-items-center">
    <p class="banner-title font-30-B">海外红人营销就用Fatohot</p>
    <p class="banner-subtitle font-16">帮您高效/精准/低成本链接全球带货红人</p>
    <div class="banner-data flex-between">
      <div v-for="(item, index) in kocData" :key="index">
        <p class="banner-data-num font-26-M">{{ item.num }}</p>
        <p class="banner-data-name font-14">{{ item.name }}</p>
      </div>
    </div>
  </div>

  <div class="search flex-center"
    :style="{ position: scrollTop > 260 ? 'fixed' : 'absolute', top: scrollTop > 260 ? '60px' : '320px', background: scrollTop > 260 ? '#f5f6fa' : '' }">
    <div class="search-box flex flex-align-items-center">
      <div class="platform-list flex">
        <div v-for="(item, index) in platformList" :key="index" class="flex-center flex-align-items-center pointer"
          :class="{ active: searchForm.source === item.name }" @click="platformChange(item.name)">
          <img :src="item.icon">
        </div>
      </div>
      <el-popover placement="bottom-start" :width="348" trigger="click">
        <template #reference>
          <div class="search-field flex-center flex-align-items-center pointer">
            <p class="font-14">{{ fieldList.find(item => item.value === searchForm.keywordType).name }}</p>
            <i class="iconfont icon-jiantou_zuoyouqiehuan"></i>
          </div>
        </template>
        <div class="search-field-popup flex">
          <div v-for="(item, index) in fieldList" :key="index"
            class="search-field-item flex-center flex-column flex-align-items-center pointer"
            :class="{ active: searchForm.keywordType === item.value }" @click="fieldChange(item.value)">
            <img :src="item.icon">
            <p class="font-12">{{ item.name }}</p>
          </div>
        </div>
      </el-popover>
      <p class="line"></p>
      <el-input v-model="searchForm.keyword"
        :placeholder="fieldList.find(item => item.value === searchForm.keywordType).placeholder" maxlength="200"
        style="width: 666px;height: 44px;" />
      <el-popover placement="bottom" :width="104" trigger="hover">
        <template #reference>
          <div class="save-record-btn flex-center flex-align-items-center pointer" @click="searchCriteriaSavedChange">
            <i class="iconfont icon-baocun"></i>
          </div>
        </template>
        <div class="save-record-explain font-12">
          保存的搜索条件
        </div>
      </el-popover>
      <div class="search-btn flex-center flex-align-items-center pointer" @click="searchConfirm">
        <i class="iconfont icon-sousuo"></i>
        <span class="font-16-M">搜索</span>
      </div>
    </div>
  </div>

  <div class="condition flex-between">
    <div class="condition-left">
      <div class="select-btns flex">
        <el-popover placement="bottom-start" :width="841" trigger="click" :show-arrow="false"
          @show="selectShowChange('catesShow', true)" @hide="selectShowChange('catesShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: searchForm.categoryIds.length > 0, active: selectShow.catesShow }">
              <span class="font-14">分类{{ searchForm.categoryIds.length > 0 ? `(${searchForm.categoryIds.length})` : ''
              }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <checkbox-popup :list="cateList" :checked="searchForm.categoryIds"
            @change="e => selectChange(e, 'categoryIds')"></checkbox-popup>
        </el-popover>
        <el-popover placement="bottom-start" :width="841" trigger="click" :show-arrow="false"
          @show="selectShowChange('areasShow', true)" @hide="selectShowChange('areasShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: searchForm.countryIds.length > 0, active: selectShow.areasShow }">
              <span class="font-14">国家{{ searchForm.countryIds.length > 0 ? `(${searchForm.countryIds.length})` : ''
              }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <checkbox-popup :list="countryList" :checked="searchForm.countryIds"
            @change="e => selectChange(e, 'countryIds')"></checkbox-popup>
        </el-popover>
        <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
          @show="selectShowChange('fansShow', true)" @hide="selectShowChange('fansShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: searchForm.fansNum !== -1, active: selectShow.fansShow }">
              <span class="font-14">
                {{ searchForm.fansNum === -1 ? '粉丝量' : searchForm.fansNum.toString().split('-').length > 1 ?
                  searchForm.fansNum : `${searchForm.fansNum}以上` }}
              </span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-range-popup :list="data.fansList" :checked="searchForm.fansNum" minPlaceholder="最小值" maxPlaceholder="最大值"
            @change="e => selectChange(e, 'fansNum')"></radio-range-popup>
        </el-popover>
        <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
          @show="selectShowChange('averageViewsShow', true)" @hide="selectShowChange('averageViewsShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: searchForm.avgPlayNum !== -1, active: selectShow.averageViewsShow }">
              <span class="font-14">{{ searchForm.avgPlayNum === -1 ? '平均观看量' :
                searchForm.avgPlayNum.toString().split('-').length > 1 ?
                  searchForm.avgPlayNum : `${searchForm.avgPlayNum}以上` }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-range-popup :list="data.averageViews" :checked="searchForm.avgPlayNum" minPlaceholder="最小值"
            maxPlaceholder="最大值" @change="e => selectChange(e, 'avgPlayNum')"></radio-range-popup>
        </el-popover>
        <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
          @show="selectShowChange('averageInteractionRateShow', true)"
          @hide="selectShowChange('averageInteractionRateShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: searchForm.avgInteractRate !== -1, active: selectShow.averageInteractionRateShow }">
              <span class="font-14">{{ searchForm.avgInteractRate === -1 ? '平均互动率' :
                searchForm.avgInteractRate.toString().split('-').length > 1 ?
                  `${searchForm.avgInteractRate.toString().split('-')[0]}%-${searchForm.avgInteractRate.toString().split('-')[1]}%`
                  : `${searchForm.avgInteractRate}%以上` }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-range-popup :list="data.averageInteractionRate" :checked="searchForm.avgInteractRate"
            minPlaceholder="最小值 %" maxPlaceholder="最大值 %"
            @change="e => selectChange(e, 'avgInteractRate')"></radio-range-popup>
        </el-popover>
        <el-popover placement="bottom" :width="118" trigger="click" :show-arrow="false"
          @show="selectShowChange('releaseTimeListShow', true)" @hide="selectShowChange('releaseTimeListShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: searchForm.lastReleaseTime !== -1, active: selectShow.releaseTimeListShow }">
              <span class="font-14">{{ searchForm.lastReleaseTime === -1 ? '最近发布' :
                `${searchForm.lastReleaseTime}天内` }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <release-time-popup :list="data.releaseTimeList" :checked="searchForm.lastReleaseTime"
            @change="e => selectChange(e, 'lastReleaseTime')"></release-time-popup>
        </el-popover>
      </div>

      <div class="switch-btns flex">
        <div class="switch-btn flex flex-align-items-center">
          <el-switch size="small" />
          <span class="font-14">本账号未联系</span>
        </div>
        <div class="switch-btn flex flex-align-items-center">
          <el-switch size="small" />
          <span class="font-14">所有账号未联系</span>
        </div>
        <div class="switch-btn flex flex-align-items-center">
          <el-switch size="small" />
          <span class="font-14">本账号未解锁</span>
        </div>
        <div class="switch-btn flex flex-align-items-center">
          <el-switch size="small" />
          <span class="font-14">所有账号未解锁</span>
        </div>
      </div>
    </div>

    <div class="condition-right">
      <div class="condition-btns flex">
        <p class="font-14 pointer">保存</p>
        <p class="font-14 pointer" @click="reset">清除</p>
        <p class="font-14 pointer" @click="searchConfirm">确定</p>
      </div>

      <div class="sort-btns flex">
        <!-- <el-popover placement="top" :width="80" trigger="hover">
          <template #reference>
            <div class="sort-btn flex-center flex-align-items-center">
              <i class="iconfont icon-mail"></i>
              <span class="font-14">有邮箱</span>
            </div>
          </template>
          <div class="save-record-explain font-12">
            是否有邮箱
          </div>
        </el-popover> -->
        <el-dropdown :hide-on-click="false" trigger="click" @command="handleCommand">
          <div class="sort-btn flex flex-align-items-center pointer">
            <i class="item-title-right iconfont icon-paixu"></i>
            <span class="font-14">{{ data.sortList.find(item => item.value === searchForm.sort).name }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(item, index) in data.sortList" :key="index" :command="item.value">
                <span :class="{ 'el-dropdown-active': item.value === searchForm.sort }">{{ item.name }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>

  <no-data v-if="list.length === 0"></no-data>
  <div v-else v-infinite-scroll="loadMore" class="internet-celebrity-list">
    <internet-celebrity-item v-for="(item, index) in list" :key="item._id" :item="item"
      @change="e => internetChange(e, index)"></internet-celebrity-item>
    <div v-if="userInfo === null" class="login-tip font-14">
      <span class="pointer" @click="loginPopupShow = true">登录</span>查看更多博主信息
    </div>
  </div>

  <page-footer-one></page-footer-one>
  <!-- <home-page-fixed :scrollTop="scrollTop"></home-page-fixed> -->
  <search-criteria-saved v-if="searchCriteriaSavedShow" @change="conditionChange"
    @close="searchCriteriaSavedChange"></search-criteria-saved>

  <login-popup v-if="loginPopupShow" @close="loginPopupShow = false"></login-popup>
</template>

<script setup>
import PageHeaderOne from '@/components/pageHeaderOne.vue';
import PageFooterOne from '@/components/pageFooterOne.vue';
// import HomePageFixed from './components/homePageFixed.vue';
import CheckboxPopup from './components/checkboxPopup.vue';
import RadioRangePopup from './components/radioRangePopup.vue';
import ReleaseTimePopup from './components/releaseTimePopup.vue';
import NoData from './components/noData.vue';
import InternetCelebrityItem from './components/internetCelebrityItem.vue';
import SearchCriteriaSaved from './components/searchCriteriaSaved.vue';
import LoginPopup from '@/components/loginPopup.vue';
import { ref, onMounted, watch } from 'vue';
import data from '@/js/data.js';
import { useStore } from 'vuex';
import api from '@/api/index.js';

const store = useStore();

const platformList = [
  {
    name: "youtube",
    icon: require('../../assets/icon-1.png')
  },
  {
    name: "tiktok",
    icon: require('../../assets/icon-2.png')
  },
  {
    name: "instagram",
    icon: require('../../assets/icon-3.png')
  }
];
const fieldList = [
  {
    name: "关键词",
    value: 'keyword',
    placeholder: "请输入通用词或品牌词，如clothing, skirt, shein",
    icon: require('../../assets/keyword.svg')
  },
  {
    name: "红人名",
    value: 'influencerName',
    placeholder: "请输入红人名或者频道名",
    icon: require('../../assets/name.svg')
  },
  {
    name: "主页链接",
    value: 'homeLink',
    placeholder: "请输入红人的社交媒体主页链接",
    icon: require('../../assets/link.svg')
  }
];

const kocData = ref([
  {
    name: '红人资源',
    num: 0,
    targetNum: 21686180
  },
  {
    name: '覆盖国家',
    num: 0,
    targetNum: 115
  },
  {
    name: '服务客户',
    num: 0,
    targetNum: 10898
  }
]);
const loginPopupShow = ref(false);
const userInfo = ref(null);
const scrollTop = ref(0);
const searchForm = ref({
  source: 'youtube',
  keywordType: 'keyword',
  keyword: '',
  categoryIds: [],
  countryIds: [],
  fansNum: -1,
  avgPlayNum: -1,
  avgInteractRate: -1,
  lastReleaseTime: -1,
  sort: undefined
});
const confirmForm = ref({
  source: 'youtube',
  page: 1,
  perPage: 10
});
const selectShow = ref({
  catesShow: false,
  areasShow: false,
  fansShow: false,
  averageViewsShow: false,
  averageInteractionRateShow: false,
  releaseTimeListShow: false
});
const cateList = ref([]);
const countryList = ref([]);
const list = ref([]);
const searchCriteriaSavedShow = ref(false);

const addCommas = num => {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
}
const setJumpNumber = (targetNum, index) => {
  let originNum = 0;
  let stepNum = 0;
  let timeNum = 1;

  let timeId = setInterval(() => {
    if (originNum < targetNum) {
      timeNum -= 0.001;
      let strNum = originNum.toString();
      // 数字比较少的时候直接用 + 1; 数字很大直接 +1 要很久才能调到最对应的数字，所有后三位数随机跳动的方式进行模拟生成
      if (targetNum.toString().length < 6) {
        stepNum += 1; // 这样才可以实现越跳越快的效果
        originNum = originNum + stepNum;
        kocData.value[index].num = addCommas(originNum);
      } else {
        stepNum += 500; // 这样才可以实现越跳越快的效果
        originNum = originNum + stepNum;
        kocData.value[index].num = addCommas(strNum.substr(0, strNum.length - 3) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10));
      }
    } else {
      kocData.value[index].num = addCommas(targetNum);
      clearInterval(timeId);
    }
  }, timeNum);
}
// 根据页面是否离开顶部，判断顶部栏样式
const pageChange = () => {
  scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop;
}
const platformChange = e => {
  if (searchForm.value.source !== e) {
    searchForm.value.source = e;
    confirmForm.value = {
      ...searchForm.value,
      page: 1,
      perPage: 100,
      fansNum: searchForm.value.fansNum === -1 ? undefined : { min_value: searchForm.value.fansNum.toString().split('-')[0], max_value: searchForm.value.fansNum.toString().split('-')[1] },
      avgPlayNum: searchForm.value.avgPlayNum === -1 ? undefined : { min_value: searchForm.value.avgPlayNum.toString().split('-')[0], max_value: searchForm.value.avgPlayNum.toString().split('-')[1] },
      avgInteractRate: searchForm.value.avgInteractRate === -1 ? undefined : { min_value: searchForm.value.avgInteractRate.toString().split('-')[0], max_value: searchForm.value.avgInteractRate.toString().split('-')[1] },
      lastReleaseTime: searchForm.value.lastReleaseTime === -1 ? undefined : searchForm.value.lastReleaseTime + 'day',
      sortRule: searchForm.value.sort ? { column: searchForm.value.sort, sortType: 'desc' } : undefined
    };
    querySensationList();
  }
}
const fieldChange = e => {
  if (searchForm.value.keywordType !== e) {
    searchForm.value.keywordType = e;
    searchForm.value.keyword = '';
  }
}
const selectChange = (e, field) => {
  searchForm.value[field] = e;
}
const selectShowChange = (field, value) => {
  selectShow.value[field] = value;
}
// 选择保存的搜索条件
const conditionChange = e => {
  console.log(e);
}
// 显示或隐藏保存的搜索条件框
const searchCriteriaSavedChange = () => {
  searchCriteriaSavedShow.value = !searchCriteriaSavedShow.value;
}
const searchConfirm = () => {
  confirmForm.value = {
    ...searchForm.value,
    page: 1,
    perPage: 10,
    categoryIds: searchForm.value.categoryIds && searchForm.value.categoryIds.length > 0 ? searchForm.value.categoryIds : undefined,
    countryIds: searchForm.value.countryIds && searchForm.value.countryIds.length > 0 ? searchForm.value.countryIds : undefined,
    fansNum: searchForm.value.fansNum === -1 ? undefined : { min_value: searchForm.value.fansNum.toString().split('-')[0], max_value: searchForm.value.fansNum.toString().split('-')[1] },
    avgPlayNum: searchForm.value.avgPlayNum === -1 ? undefined : { min_value: searchForm.value.avgPlayNum.toString().split('-')[0], max_value: searchForm.value.avgPlayNum.toString().split('-')[1] },
    avgInteractRate: searchForm.value.avgInteractRate === -1 ? undefined : { min_value: searchForm.value.avgInteractRate.toString().split('-')[0] / 100, max_value: searchForm.value.avgInteractRate.toString().split('-')[1] / 100 },
    lastReleaseTime: searchForm.value.lastReleaseTime === -1 ? undefined : searchForm.value.lastReleaseTime + 'day',
    sortRule: searchForm.value.sort ? { column: searchForm.value.sort, sortType: 'desc' } : undefined
  };
  querySensationList();
}
const reset = () => {
  searchForm.value = {
    source: 'youtube',
    keywordType: 'keyword',
    keyword: '',
    categoryIds: [],
    countryIds: [],
    fansNum: -1,
    avgPlayNum: -1,
    avgInteractRate: -1,
    lastReleaseTime: -1,
    sort: undefined,
    total: 0
  };
  confirmForm.value = {
    source: 'youtube',
    page: 1,
    perPage: 10
  };
  querySensationList();
}
const handleCommand = e => {
  e = typeof (e) === 'string' ? e : undefined;
  if (searchForm.value.sort !== e) {
    searchForm.value.sort = e;
    confirmForm.value.sortRule = e ? { column: e, sortType: 'desc' } : undefined;
    confirmForm.value.page = 1;
    querySensationList();
  }
}
// 获取红人分类
const queryCateList = () => {
  api.sensation.queryCateList().then(res => {
    cateList.value = res.map(item => {
      item.children = item.categories;
      return item;
    });
  });
}
// 获取国家列表
const queryCountryList = () => {
  api.sensation.queryCountryList().then(res => {
    countryList.value = res.filter(item => item.countries.length).map(item => {
      item.children = item.countries;
      return item;
    });
  });
}
// 获取红人列表
const querySensationList = () => {
  api.sensation.querySensationList(confirmForm.value).then(res => {
    res.list = res.list.map(item => {
      item.videos = Array.isArray(item.videos) ? item.videos.map(item1 => {
        item1.type = 'video';
        return item1;
      }) : [];
      item.images = Array.isArray(item.images) ? item.images : [];
      return item;
    });
    list.value = confirmForm.value.page === 1 ? res.list : list.value.concat(res.list);
    confirmForm.value.total = res.total;
  });
}
const internetChange = (e, index) => {
  list.value[index]._source[e] = !list.value[index]._source[e];
}
const loadMore = () => {
  if (confirmForm.value.page < 3 && confirmForm.value.page * 10 < confirmForm.value.total) {
    confirmForm.value.page++;
    querySensationList();
  } else if (confirmForm.value.page === 3 && !userInfo.value) {
    loginPopupShow.value = true;
  }
}

onMounted(() => {
  pageChange();
  window.addEventListener("scroll", pageChange, false);
  kocData.value.forEach((item, index) => {
    setJumpNumber(item.targetNum, index);
  });
  querySensationList();
  queryCateList();
  queryCountryList();
});
watch(store.state, newValue => {
  userInfo.value = newValue.userInfo;
}, { immediate: true, deep: true });
</script>

<style lang="less" scoped>
.banner {
  height: 390px;
  background: url(@/assets/banner.png) 0 0/cover no-repeat;

  .banner-title {
    margin: 30px 0 9px;
    color: #fff;
    letter-spacing: 1px;
  }

  .banner-subtitle {
    margin-bottom: 40px;
    color: #fff;
    letter-spacing: 3px;
  }

  .banner-data {
    width: 526px;

    .banner-data-num {
      color: #fff;
      margin-bottom: 6px;
    }

    .banner-data-name {
      color: #fff;
    }
  }
}

.search {
  position: absolute;
  width: 100%;
  min-width: 1260px;
  height: 72px;
  z-index: 100;

  .search-box {
    position: relative;
    top: 20px;
    width: 1260px;
    height: 82px;
    padding: 20px 32px 20px 24px;
    border-radius: 20px;
    box-shadow: 0 4px 15px 0 rgba(101, 40, 53, .1);
    background: #fff;

    .platform-list {
      width: 158px;
      height: 44px;
      background: #f8f8f8;
      border-radius: 10px;
      display: flex;
      margin-right: 8px;

      div {
        width: 54px;
        height: 44px;
        border-radius: 10px;

        &.active {
          background: rgba(255, 82, 119, .1);
          border: 1px solid @main-color;
        }

        img {
          width: 24px;
          height: 24px;
        }
      }
    }

    .search-field {
      width: 128px;
      height: 44px;
      border-radius: 10px;
      margin-right: 8px;

      &:hover {
        background: #f8f8f8;
      }

      p {
        color: #333;
        margin-right: 11px;
      }

      i {
        color: #9a9a9a;
      }
    }

    .line {
      width: 1px;
      height: 30px;
      background: #f2f2f2;
      margin-right: 16px;
    }

    ::v-deep .el-input,
    ::v-deep .el-input__wrapper {
      border: none !important;
      background: none !important;
      box-shadow: none !important;
    }

    .save-record-btn {
      margin-left: 30px;
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: #f8f8f8;

      &:hover {
        i {
          color: @main-color;
        }
      }

      i {
        font-size: 24px;
        color: #999;
      }
    }

    .search-btn {
      margin-left: 15px;
      width: 120px;
      height: 42px;
      background: linear-gradient(140deg, #a775ff, @main-color);
      border-radius: 12px;

      i {
        font-size: 20px;
        color: #fff;
        margin-right: 10px;
      }

      span {
        color: #fff;
      }
    }
  }
}

.search-field-popup {
  padding: 10px 16px 8px;

  .search-field-item {
    width: 100px;
    height: 80px;
    border-radius: 10px;

    &:hover,
    &.active {
      background: #ffedf1;

      p {
        color: @main-color;
      }
    }

    img {
      width: 24px;
      height: 24px;
      margin-bottom: 4px;
    }

    p {
      color: #333;
    }
  }
}

.save-record-explain {
  text-align: center;
  line-height: 37px;
  color: #333;
}

.condition {
  width: 1260px;
  margin: 0 auto;
  padding-top: 70px;

  .select-btns {
    margin-bottom: 32px;

    .select-btn {
      min-width: 118px;
      height: 32px;
      border-radius: 6px;
      background: #fff;
      padding-left: 12px;
      padding-right: 8px;
      margin-right: 8px;
      border: 1px solid #f2f2f2;

      &.selected {
        background: #ffedf1;

        span,
        i {
          color: @main-color;
        }
      }

      &.active {
        background: #ffedf1;
        border: 1px solid @main-color;

        span,
        i {
          color: @main-color;
        }
      }

      span {
        color: #333;
      }

      i {
        color: #999;
        font-size: 12px;
      }
    }
  }

  .switch-btns {
    .switch-btn {
      margin-right: 24px;

      &:last-child {
        margin-right: 0;
      }

      span {
        padding-left: 8px;
      }
    }
  }

  .condition-btns {
    margin-bottom: 32px;

    p {
      width: 64px;
      height: 32px;
      border-radius: 6px;
      color: #666;
      background: #f8f8f8;
      text-align: center;
      line-height: 32px;
      margin-right: 10px;

      &:last-child {
        background: #ffeef1;
        color: @main-color;
        margin-right: 0;

        &:hover {
          background: @main-color;
          color: #fff;
        }
      }
    }
  }

  .sort-btns {
    .sort-btn {
      min-width: 100px;
      height: 34px;

      &:hover {
        background: #f8f8f8;
      }

      i {
        font-size: 14px;
        color: #606266;
      }

      span {
        color: #606266;
        margin-left: 8px;
      }
    }

    &::v-deep {

      .el-select,
      .el-input {
        width: auto !important;
        min-width: 100px !important;
      }
    }
  }
}

.login-tip {
  padding: 60px 0 120px;
  text-align: center;
  color: #999;

  span {
    color: @main-color;
  }
}

.el-dropdown-active {
  color: @main-color !important;
}
</style>
